<script setup>
import * as echarts from 'echarts/core'
import { GridComponent,TooltipComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { ref,onMounted,onUnmounted } from 'vue'
echarts.use([GridComponent, BarChart, CanvasRenderer,TooltipComponent])//注册必须的组件和渲染器
const chartRef = ref(null)
const getMap = () => {//获取柱状图
  const myChart = echarts.init(chartRef.value,null,{
    renderer:'canvas',
    useDirtyRect:false
  });
  const option = {
    color: ["#3398DB"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        
      },
        // 设置工具箱按钮的样式
    iconStyle: {
      normal: {
        color: 'rgba(255, 255, 255, 0.4)'
      },
      emphasis: {
        borderColor: 'rgba(255, 255, 255, 1)'
      },
      opacity:0.4
    }
    },
    //修改图表大小
    grid: {
      left: "0%",
      top:"10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel:{
          color:"rgba(255,255,255,.6)",
          fontSize:8
        },
        axisLine:{
          show:false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel:{
          color:"rgba(255,255,255,.6)",
          fontSize:"12"
        },
        axisLine:{
          show:true,
          lineStyle:{
            color:"rgba(255,255,255,.1)",
            width:2
          }
        },
        splitLine:{
          lineStyle:{
            color:"rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "35%",
        data: [200, 300, 300, 900, 1500, 1200, 600],
        itemStyle:{
          barBorderRadius:2
        }
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', myChart.resize);
}
onMounted(async()=>{
  await getMap()
})
onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', handleResize); // 移除事件监听
    myChart.dispose(); // 销毁图表实例
    myChart = null; // 释放引用
  }
});
</script>
<template>
<div class="bartu" ref="chartRef">

</div>
</template>
<style scoped lang="less">
.bartu{
  height:240px;
}
</style>